/*
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-06-20 14:03:49
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-06-20 19:51:28
 * @FilePath: \react项目框架\sx_demo2\src\pages\My\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react'
// 引入样式
import './My.css'
// 引入组件 
import { NavBar, Space, Toast, Button, Card, Divider, Ellipsis, Grid } from 'antd-mobile'
// icon图标
import { AntOutline, BellOutline, RightOutline, DownOutline, UpOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
// import { DemoBlock } from 'demos'
// 定义文本

const index = () => {
    const content = '少时诵诗书少时诵诗书是撒是撒是撒是撒少时诵诗书少时诵诗书是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒是撒777777撒是撒是撒是撒是撒是撒是撒少时诵诗书少时诵诗书飒飒飒飒飒飒飒飒飒飒飒飒飒飒飒'
    const navigate = useNavigate()
        // 跳转评论
    const Comments = () =>{
        navigate('/comments')
    }
    
    // 点击右侧图标
    const right = (
        <div style={{ fontSize: 24 }}>
            <Space style={{ '--gap': '16px' }}>
                <BellOutline color='#fff' />
            </Space>
        </div>
    )
    // 点击左侧返回
    const back = () =>
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
        })
    return (
        <div className='box'>
            <nav>
                {/* 导航栏 */}
                <NavBar right={right} onBack={back}>我的病友圈</NavBar>
            </nav>
            <main>
                <div className='main-con'>
                    <Divider contentPosition='left'
                        style={{
                            color: '#000',
                            border: 'none',
                            fontSize: '1.5rem'
                        }}
                    >05-08</Divider>
                    <div className='main-con-top'>

                        <div className='title-con'>
                            <h3>口腔溃疡可能是癌症预警</h3>
                            <div className=''>
                                <Ellipsis direction='end' rows={3} content={content} />
                            </div>
                        </div>
                        <div className='punlun' onClick={()=>Comments()}>查看评论&gt;&gt;</div>
                    </div>
                </div>
                <div className='main-con'>
                    <Divider contentPosition='left'
                        style={{
                            color: '#000',
                            border: 'none',
                            fontSize: '1.5rem'
                        }}
                    >05-08</Divider>
                    <div className='main-con-top'>

                        <div className='title-con'>
                            <h3>口腔溃疡可能是癌症预警</h3>
                            <div className=''>
                                <Ellipsis direction='end' rows={3} content={content} />
                            </div>
                        </div>
                        <div className='punlun'>查看评论&gt;&gt;</div>
                    </div>
                </div>
                <div className='main-con'>
                    <Divider contentPosition='left'
                        style={{
                            color: '#000',
                            border: 'none',
                            fontSize: '1.5rem'
                        }}
                    >05-08</Divider>
                    <div className='main-con-top'>

                        <div className='title-con'>
                            <h3>口腔溃疡可能是癌症预警</h3>
                            <div className=''>
                                <Ellipsis direction='end' rows={3} content={content} />
                            </div>
                        </div>
                        <div className='punlun'>查看评论&gt;&gt;</div>
                    </div>
                </div>
                <div className='main-con'>
                    <Divider contentPosition='left'
                        style={{
                            color: '#000',
                            border: 'none',
                            fontSize: '1.5rem'
                        }}
                    >05-08</Divider>
                    <div className='main-con-top'>

                        <div className='title-con'>
                            <h3>口腔溃疡可能是癌症预警</h3>
                            <div className=''>
                                <Ellipsis direction='end' rows={3} content={content} />
                            </div>
                        </div>
                        <div className='punlun'>查看评论&gt;&gt;</div>
                    </div>
                </div>
                <div className='main-con'>
                    <Divider contentPosition='left'
                        style={{
                            color: '#000',
                            border: 'none',
                            fontSize: '1.5rem'
                        }}
                    >05-08</Divider>
                    <div className='main-con-top'>

                        <div className='title-con'>
                            <h3>口腔溃疡可能是癌症预警</h3>
                            <div className=''>
                                <Ellipsis direction='end' rows={3} content={content} />
                            </div>
                        </div>
                        <div className='punlun'>查看评论&gt;&gt;</div>
                    </div>
                </div>
                <div className='main-con'>
                    <Divider contentPosition='left'
                        style={{
                            color: '#000',
                            border: 'none',
                            fontSize: '1.5rem'
                        }}
                    >05-08</Divider>
                    <div className='main-con-top'>

                        <div className='title-con'>
                            <h3>口腔溃疡可能是癌症预警</h3>
                            <div className=''>
                                <Ellipsis direction='end' rows={3} content={content} />
                            </div>
                        </div>
                        <div className='punlun'>查看评论&gt;&gt;</div>
                    </div>
                </div>
            </main>
        </div>
    )
}

export default index